<template>
  <div>
    <!-- 拆分组件 -->
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表 -->
    <v-list @willUpdate="willUpdate" :list="list" @init="init"></v-list>
    <!-- 弹框 -->
    <v-form :status="status" @init="init" :list="list" ref="form"></v-form>
  </div>
</template>
<script>
import { reqmenulist } from "../../http/api";
import vList from "./components/list.vue"
import vForm from "./components/form.vue"
export default {
  components: {
      vList,
      vForm
  },
  props: [],
  data() {
    return {
        //2.1初始值
        status:{
            isshow:false,//控制弹框是否出现
            isAdd:true,//是添加的弹框还是编辑的弹框
        },
        //3.1初始值
        list:[],
    };
  },
  mounted() {
      //3.2发起列表请求
      this.init()
  },
  methods: {
      //2.2点击了添加
      willAdd(){
          this.status={
              isshow:true,
              isAdd:true,
          };
      },
      //2.4点了编辑
      willUpdate(id){
          this.status = {
              isshow:true,
              isAdd:false,
          };
          //7.2让form的getOne(id)
          this.$refs.form.getOne(id)
      },
      //4.2获取列表
      init(){
          reqmenulist({
              istree:true,
          }).then((res)=>{
              if(res.data.code ==200){
                  this.list = res.data.list
              }
          })
      }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>